<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩录入系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-blue-500 text-white p-6">
            <h2 class="text-2xl font-bold text-center">
                <i class="fa fa-graduation-cap mr-2"></i>学生成绩录入
            </h2>
        </div>
        <div class="p-6">
            <!-- 成功消息显示区域 -->
            {% if success %}
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                <i class="fa fa-check-circle mr-2"></i>数据已成功保存！
            </div>
            {% endif %}
            
            <!-- 错误消息显示区域 -->
            {% if error %}
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <i class="fa fa-exclamation-circle mr-2"></i>{{ error }}
            </div>
            {% endif %}
            
            <!-- 表单 -->
            <form method="POST" action="/submit">
                <div class="mb-4">
                    <label for="name" class="block text-gray-700 mb-2">
                        <i class="fa fa-user mr-2"></i>学生姓名
                    </label>
                    <input type="text" id="name" name="name" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div class="mb-6">
                    <label for="score" class="block text-gray-700 mb-2">
                        <i class="fa fa-star mr-2"></i>成绩
                    </label>
                    <input type="number" id="score" name="score" min="0" max="100" step="0.5" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <button type="submit" 
                    class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition duration-200">
                    <i class="fa fa-save mr-2"></i>保存成绩
                </button>
            </form>
            
            <div class="mt-6 pt-4 border-t border-gray-200">
                <a href="/view" class="text-blue-500 hover:text-blue-700 text-center block">
                    <i class="fa fa-list mr-1"></i>查看所有成绩
                </a>
            </div>
        </div>
    </div>
</body>
</html>
